<template>
<view>
	<view class="dzmp">
		<image class="bg" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/0b9e2fc306f38e94bac48ea38dbfb93.jpg" mode=""></image>
		<view class="tx" @click="update('avatar')">
			<image v-if="!form.avatar" class="shangchuan" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/shangchuan.png" mode=""></image>
			<image v-else class="image" :src="form.avatar" mode=""></image>
		</view>
		<view class="info_1">
			<view class="info_flex">
				<view class="info_name">{{form.nickname||'姓名'}}</view>
				<view class="info_zw">{{form.career||'职位'}}</view>
			</view>
			<view class="info_company">{{form.company_name||'所在单位'}}</view>
		</view>
		<view class="wxcode">
			<view class="img"  @click="update('code')">
				<image v-if="!form.qrcode" class="shangchuan" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/shangchuan.png" mode=""></image>
				<image v-else class="image" :src="form.qrcode" mode=""></image>
			</view>
			<view class="wx_text">微信二维码</view>
		</view>
		<view class="dh">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/dzmp_dh.png" mode=""></image>
			<view class="">{{form.mobile||'联系电话'}}</view>
		</view>
		<view class="dh dz">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/dzmp_add.png" mode=""></image>
			<view class="">{{form.address||'所在地址'}}</view>
		</view>
	</view>
	<!-- <image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/bg2.jpg" mode="widthFix" style="width: 100%;"></image> -->
	<view class="content">
	<view class="item_i"><view class="item_t must">姓名</view> <input class="right" placeholder="请输入姓名" type="text" v-model="form.nickname" /></view>
	<view class="item_i"><view class="item_t must">手机号</view> 
		<view class="mobile">
			<input class="right" placeholder="请输入手机号"  type="text" v-model="form.mobile" />
			<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="btn">获取</button >
		</view>
	</view>
	<view class="item_i"><view class="item_t">单位类型</view>
		<picker class="right" @change="typeChange" :range="typeList" range-key='name'>
			<view class="right">{{form.com_type==1?'企业':form.com_type==2?'事业单位':form.com_type==3?'政府':'请选择类型'}}</view>
		</picker>
	</view>
	<view class="item_i"><view class="item_t ">公司/单位</view> <input class="right"  placeholder="请输入公司/单位"  type="text" v-model="form.company_name" /></view>
	<view class="item_i"><view class="item_t ">地址</view> <view class="right" @click="getAddress">{{form.address||'请选择单位地址'}}</view></view>
	<view class="item_i"><view class="item_t ">职务</view> <input class="right" type="text"  placeholder="请输入职务" v-model="form.career" /></view>
	<view class="item_i"><view class="item_t wid70">我的园区</view><button @click="showPark" class="btn">添加</button >
		<view class="park_item" v-for="(item,index) in parkList" :key='index'>{{item.park_name}}  <icon @click="del('park',index)" color='#fff' class="close" type="clear" size="16"/></view>
	</view>
	<view class="item_i"><view class="item_t wid70">我的项目</view><button @click="showPark1" class="btn">添加</button >
		<view class="park_item" v-for="(item,index) in proList" :key='index'>{{item.name}}  <icon @click="del('pro',index)" color='#fff' class="close" type="clear" size="16"/></view>
	</view>
	</view>
	<choose-park ref="choosePark" @getPark='getPark' ></choose-park>
	<choose-pro ref="choosePro" @getPro='getPro' ></choose-pro>
	<view class="" style="width: 100%;height: 80px;"></view> 
	<view class="bottom1" :style="{'padding-bottom': bottom_iphone?20 + 'rpx':''}">
		<view class="btn" @click="submit">提交</view>
	</view>
</view>
</template>

<script>
	import choosePark from '../../components/choosePark/choosePark.vue'
	import choosePro from '../../components/choosePro/choosePro.vue'
	import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js"
	import {UpdateUser,GetUseInfo,parklist,localprojects,GetopenidByCode,getWxappUserPhoneByCode} from '../../utils/api.js'
	export default {
		data() {
			return {
				form:{
					nickname:'',
					mobile:'',
					company_name:'',
					com_type:'',
					career:'',
					avatar:'',
					qrcode:'',
					address:'',
					lat:'',
					lng:'',
					park_ids:'',
					project_ids:'',
				},
				type_name:'',
				data:{id:'',image:'',chain_names:''},
				typeList:[{name:'企业',id:1},{name:'事业单位',id:2},{name:'政府',id:3}],
				bottom_iphone:uni.getStorageSync('bottom')||false,
				info:JSON.parse(uni.getStorageSync('userinfo')),
				parkList:[],
				proList:[]
			}
		},
		components:{
			choosePark,
			choosePro
		},
		onLoad(option){
			// parklist({user_id:this.info.id}).then(res=>{
			// 	this.parkList = res.data.data
			// })
			// localprojects.getList({user_id:this.info.id}).then(res=>{
			// 	this.proList= res.data.data
			// })
			GetUseInfo().then(res=>{
				this.form.nickname= res.data.nickname
				this.form.avatar= res.data.avatar
				this.form.mobile= res.data.mobile
				this.form.career= res.data.career
				this.form.com_type= res.data.com_type
				this.form.company_name= res.data.company_name
				this.form.address= res.data.address 
				this.form.qrcode= res.data.qrcode 
				this.form.lat= res.data.lat 
				this.form.lng= res.data.lng 
				this.form.id= res.data.id 
				parklist({user_id:this.form.id}).then(res=>{
					this.parkList = res.data.data
				})
				localprojects.getList({user_id:this.form.id}).then(res=>{
					this.proList= res.data.data
				})
			})
			
			let that = this
			uni.login({
				provider: 'weixin',
				success: function (res) {
					GetopenidByCode({code:res.code}).then(res=>{
						uni.setStorageSync('openid',res.data.openid)
						uni.setStorageSync('session_key',res.data.session_key)
					})
				}
			})
		},
		methods: {
			del(type,index){
				uni.showModal({
					title: '删除',
					content: '确定是否删除',
					success: (res)=>{
						if (res.confirm) {
							if(type=='park'){
								this.parkList.splice(index,1)
							}else{
								this.proList.splice(index,1)
							}
						} 
					}
				})
			},
			getPark(item){
				if(item){
					if(this.parkList.findIndex(item1=>item1.park_name==item.park_name)==-1){
						this.parkList.push(item)
					}else{
						uni.showToast({
							title:'园区已选择',
							icon:'none'
						})
					}
				}
				setTimeout(() => {
				   uni.pageScrollTo({scrollTop: 9999, duration: 0});
				}, 50);
			},
			getPro(item){
				if(item){
					if(this.proList.findIndex(item1=>item1.id==item.id)==-1){
						this.proList.push(item)
					}else{
						uni.showToast({
							title:'项目已选择',
							icon:'none'
						})
					}
				}
				setTimeout(() => {
				   uni.pageScrollTo({scrollTop: 9999, duration: 0});
				}, 50);
			},
			showPark(){
				this.$refs.choosePark.show()
			},
			showPark1(){
				this.$refs.choosePro.show()
			},
			getAddress(){
				uni.chooseLocation({
					success: e => {
						this.form.address = e.address
						this.form.lat = e.latitude
						this.form.lng = e.longitude
					},
					fail:e =>{
						console.log(e)
					}
				}) 
			},
			typeChange(val){
				this.type_name = this.typeList[val.detail.value].name
				this.form.com_type = this.typeList[val.detail.value].id
			},
			onGetPhoneNumber(e){  
				getWxappUserPhoneByCode({code:e.detail.code}).then(res=>{
					this.form.mobile = res.data.phone_info.phoneNumber
				})
			},
			typeChange(val){
				this.type_name = this.typeList[val.detail.value].name
				this.form.com_type = this.typeList[val.detail.value].id
			},
			update(type){
				 uni.chooseImage({
						count:1,
				 		success:(res)=>{
				 			const tempFilePaths = res.tempFilePaths;
				 			uni.showLoading({ mask:true,
				 				title:'正在上传'
				 			})
				 			tempFilePaths.forEach((item,index)=>{
				 				uni.uploadFile({
				 					url:'https://bigdataapi.parkic.com/api/UploadFife',		//post请求的地址
				 					filePath:item,
				 					name:'file',	
				 					success: (uploadFileRes) => {
				 						var obj = JSON.parse(uploadFileRes.data);
										if(type == 'avatar'){
											this.form.avatar = obj.data.url
										}else{
											this.form.qrcode = obj.data.url
										}
										uni.hideLoading()
				 					},
				 					fail:(err)=>{
				 						uni.showToast({
				 							title:'上传失败',
				 							icon:'none'
				 						})
				 					}
				 				})
				 			})
				 		}
				 	})
		  },
			submit(){
				console.log(this.form)
				if(!this.form.nickname||!this.form.mobile){
					uni.showToast({
						icon:'none',
						title:'请输入必填项'
					})
					return
				}
				if(this.parkList.length>0){
					let park_ids = []
					this.parkList.forEach(item=>{
						park_ids.push(item.identification)
					})
					this.form.park_ids = park_ids.join(',')
				}
				if(this.proList.length>0){
					let project_ids = []
					this.proList.forEach(item=>{
						project_ids.push(item.id)
					})
					this.form.project_ids = project_ids.join(',')
				}
				UpdateUser(this.form).then(res=>{
					if(res.status==1){
						uni.showToast({
							title:'操作成功'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.park_item{
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		border-radius: 3px;
		padding: 0 24px 0 8px;
		background-color: #ff9933;
		color: #fff;
		position: relative;
		margin: 6px 0;
		.close{
			position: absolute;
			top: 2px;
			right: 2px;
		}
	}
	.dh{
		position: absolute;
		left: 18px;
		bottom: 48px;
		color: rgba(255,255,255,0.9);
		font-size: 14px;
		display: flex;
		align-items: center;
		image{
			width: 16px;
			height: 16px;
			margin-right: 6px;
		}
	}
	.dz{
		bottom: 22px;
	}
	.dzmp{
		width: 90%;
		position: relative;
		left: 5%;
		.info_1{
			position: absolute;
			left: 76px;
			top: 16px;
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 48px;
			.info_flex{
				display: flex;
				align-items: center;
				.info_name{
					font-size: 18px;
					margin-right: 10px;
					font-weight: 800;
				}
				.info_zw{
					height: 18px;
					padding: 0 6px;
					line-height: 18px;
					font-size: 12px;
					background-color: #FC5517;
					border-radius: 3px;
				}
			}
			.info_company{
				font-size:14px;
				color:  rgba(255,255,255,0.9);
			}
		}
		.tx{
			position: absolute;
			width: 48px;
			height: 48px;
			border-radius: 24px;
			overflow: hidden;
			background-color:  rgba(255,255,255,0.3);
			border: 1px solid  rgba(255,255,255,0.5);
			left: 16px;
			top: 16px;
			color: #fff;
			.image{
				width: 100%;
				height: 100%;
			}
			.shangchuan{
				width: 24px;
				height: 24px;
				padding: 12px;
			}
		}
		.wxcode{
			position: absolute;
			right: 16px;
			top: 16px;
			.img{
				overflow: hidden;
				background-color: rgba(255,255,255,0.3);
				width: 66px;
				height: 66px;
				border-radius: 4px;
				border: 1px dashed  rgba(255,255,255,0.5);
			}
			.image{
				width: 66px;
				height: 66px;
			}
			.shangchuan{
				width: 24px;
				height: 24px;
				padding: 21px;
			}
			.wx_text{
				width: 100%;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
				color:  rgba(255,255,255,0.9);
			}
		}
		.bg{
			width: 100%;
			height: 180px;
		}
	}
	.item_l{
		width: calc(100% - 20px);
		display: flex;
		padding: 15px 10px;
		border-bottom: 1px solid #e7e7e7;
	.img{
		width: 40%;
		height: 90px;
		margin-right: 10px;
		border-radius: 4px;
		overflow: hidden;
		position: relative;
	}
	.type_t{
		height: 22px;
		width: 70px;
		text-align: center;
		line-height: 22px;
		background-color: #ff9933;
		color: #fff;
		right: -18px;
		top: 6px;
		font-size: 12px;
		transform: rotate(45deg);
		position: absolute;
	}
	image{
		width: 100%;
		height: 100%;
	}
		.right_l{
			width: calc(60% - 10px);
			font-size: 14px;
			color: #000;
			position: relative;
		}
		.bottom{
			position: absolute;
			bottom: 2px;
			.flex_l{
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #888;
				margin-top: 2px;
				image{
					width: 12px;
					height: 12px;
					margin-right: 4px;
				}
			}
		}
	}

.bottom1{
	position: fixed;
	bottom: 0;
	width: calc(100% - 20px);
	padding: 0 10px;
	height: 66px;
	background: #FFFFFF;
	display: flex;
	z-index: 100;
	box-shadow: 0px -2px 2px #e7e7e7;
	.btn{
		width: 100%;
		height: 42px;
		margin: auto;
		background-color: #f93;
		border-radius: 8px;
		font-size: 18px;
		font-weight: 800;
		color: #fff;
		text-align: center;
		line-height: 42px;
	}
}
.content{
	height: calc(100% - 160px);
	overflow: auto;
	padding: 0 14px;
	width: calc(100% - 28px);
}
.item_i{
	width: calc(100% - 24px);
	padding: 10px 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e7e7e7;
	.item_t{
		position: relative;
		left: 8px;
		font-size: 14px;
		color:#333;
		width: 100%;
		margin-bottom: 8px;
	}
	.wid70{
		width: 70%;
	}
	.right{
		// text-align: right;
		width: 100%;
		color: #666;
	}
	.mobile{
		display: flex;
		align-items: center;
		width: 100%;
	}
	.btn{
		width: 52px;
		font-size: 14px;
		color: #fff;
		background: #ff9933;
		border-radius: 4px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		margin-left: 4px;
		padding: 0;
		margin-right: 0;
	}
	.must::before{
		position: absolute;
		content:' ';
		background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/must.png) no-repeat;
		background-size: 100% 100%;
		width: 8px;
		height: 8px;
		top: 6px;
		left: -12px;
	}
}
</style>
